<template>
    <div class="login">
        <h1>注册</h1>
        <div class="login-wrapper">
            <div class="avatar">
                <img alt=""
                     src="https://img1.baidu.com/it/u=2959806076,129715007&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300">
            </div>
            <!--            <van-button type="primary">主要按钮</van-button>-->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                            v-model="username"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                            label="用户名"
                            name="username"
                            placeholder="用户名"
                    />
                    <van-field
                            v-model="password"
                            :rules="[{ required: true, message: '请填写密码' }]"
                            label="密码"
                            name="password"
                            placeholder="密码"
                            type="password"
                    />
                    <van-field
                        v-model="nickname"

                        label="昵称"
                        name="nickname"
                        placeholder="昵称"
                        :rules="[{ required: true, message: '请填写昵称' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button block native-type="submit" round type="primary">
                        注册
                    </van-button>
                </div>
            </van-form>

        </div>
        <p class="register" @click="()=>router.push('/login')">已有账号？点击登录</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from '@/api/index.js'
import {useRouter} from "vue-router";
import {showSuccessToast} from "vant";

const username = ref('')
const password = ref('')
const nickname=ref('')
const router=useRouter()
const onSubmit =async (values) => {
   const res=await axios.post('/user/register',values)
    console.log(res);
   showSuccessToast(res.msg)
    setTimeout(()=>{
        router.push('/login')
    },1500)
}

</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 0 0.3rem;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

  h1 {
    display: block;
    height: 0.6933rem;
    text-align: center;
    font-size: 0.48rem;
    margin-top: 1.12rem;
  }

  .login-wrapper {
    width: 7.44rem;
    height: 10.77rem;
    border: 1px solid rgba(187, 187, 187, 1);
    margin: 0 auto;
    margin-top: 1.7rem;
    border-radius: 0.3rem;
    box-shadow: 0 0 0.533rem 0 rgba(170, 170, 170, 1);

    .avatar {
      width: 2.4rem;
      height: 2.4rem;
      margin: 1rem auto 0.77rem;
      border-radius: 50%;
      //background-color: #fff;
      overflow: hidden;

      img {
        width: 100%;
        //height: 100%;
        //border-radius: 50%;
      }
    }

  }
  .register{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.374rem;
    color: rgba(16,16,16,1);
  }
}
:deep(.van-cell__title.van-field__label){
  width: 45px;
}//
</style>